<template>
	<view class="user-dynamic-info">
		<view class="user-dynamic-info-1">
			<image :src="userInfo.heard_img"></image>
			<view class="user-dynamic-info-1-box">
				<view class="user-dynamic-info-1-name">用户名：{{userInfo.nickname}}</view>
				<view class="user-dynamic-info-1-id">ID:{{user_id}}</view>
				<view class="user-dynamic-info-1-phone">联系方式：{{userInfo.phone}}</view>
			</view>
			<text class="phoneCall" @click="phoneCall">呼叫</text>
		</view>
		<view class="user-dynamic-datetype">
			<view v-for="(data,index) in dateType" :class="{active: dateIndex===index}" @click="selectDatetype(index)" :key="index">{{data.label}}</view>
		</view>
		<view class="user-dynamic-info-2">
			<view class="user-dynamic-info-2-tit">用户使用情况（次数）</view>
			<view class="user-dynamic-info-2-list">
				<view class="user-dynamic-info-2-item" v-for="(data,index) in all_browse" :key="index">
					<view>{{data.name}}</view>
					<text>{{data.value}}</text>
				</view>
			</view>
		</view>
		<view>
			<view class="user-dynamic-info-3">
				<view class="tabs">
					<u-tabs :list="tabs" active-color="#141414" height="100" bar-width="50" font-size="28" :bold="true" inactive-color="#757575"
					 :is-scroll="false" :current="active" @change="change"></u-tabs>
				</view>
			</view>
			<!-- 用户动态 -->
			<view class="user-dynamic-info-list" v-if="active == 0">
				<view v-if="dynamicList.length" class="user-dynamic-item" v-for="(item,index) in dynamicList" :key="index">
					<view class="user-dynamic-item-tims"><text class="blue">{{item.foot_where}}</text>浏览次数：{{item.num}}次</view>
					<view class="user-dynamic-item-tit">
						<text v-if="item.type==1">小程序</text>
						<text v-if="item.type==2">APP</text>
						<text v-if="item.type==3">H5</text>
						<text v-if="item.type==4">PC</text>
						<text v-if="item.type==5">Ipad</text>
						<text v-if="item.type==6">后台系统</text>
						<text>{{item.add_time}}</text>
					</view>
				</view>
				<pt-nothing
					text="暂无数据" 
					:fixed="false" 
					v-if="noData.noData1" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
				
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="dynamicList.length > 3" />
			</view>
			<!-- 用户足迹 -->
			<view class="user-foot-info-list" v-else>
				<view v-if="footList.length" class="user-dynamic-item" v-for="(item,index) in footList" :key="index" @click="goProInfo(item)">
					<image :src="item.image_middle"></image>
					<view class="user-dynamic-item-info">
						<view class="title">{{item.goods_name}}</view>
						<view class="price">￥<text>{{item.retail_price}}</text></view>
						<view class="times">浏览次数:{{item.num}}次 <text>{{item.add_time}}</text></view>
					</view>
				</view>
				<pt-nothing
					text="暂无数据" 
					:fixed="false" 
					v-if="noData.noData2" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="footList.length > 3" />
			</view>
		</view>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateIndex: 0,
				dateType: [{
					label: '全部',
					value: ''
				},{
					label: '今天',
					value: 'today'
				},{
					label: '昨天',
					value: 'yestoday'
				},{
					label: '本周',
					value: 'week'
				},{
					label: '上周',
					value: 'lastweek'
				},{
					label: '本月',
					value: 'month'
				},{
					label: '上月',
					value: 'lastmonth'
				},{
					label: '今年',
					value: 'year'
				},{
					label: '去年',
					value: 'lastyear'
				}],
				noData: {
					noData1: false,
					noData2: false,
				},
				more: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				all_browse: [{
						name: '小程序',
						value: 0
					},
					{
						name: 'APP',
						value: 0
					},
					{
						name: 'WEB',
						value: 0
					},
					{
						name: '电脑端',
						value: 0
					},
					{
						name: 'Ipad',
						value: 0
					}
				],
				userInfo: {
					nickname: '',
					heard_img: '',
					phone: ''
				},
				user_id: '',
				page: {
					page1: 0,
					page2: 0
				},
				active: 0,
				tabs: [{
					name: '用户动态'
				}, {
					name: '用户足迹'
				}],
				dynamicList: [],
				footList: []
			};
		},
		onLoad(options) {
			this.user_id = options.user_id
			this.active = options.type
			this.init(0)
			this.init(1)
			this.getUserInfo()
			this.getAllBrowse()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				let data = {
					user_id: this.user_id
				}
				this.$u.apiWei.UserList(data).then(res => {
					if (res.datas[0]) {
						this.userInfo.nickname = res.datas[0].nickname
						this.userInfo.heard_img = res.datas[0].heard_img
						this.userInfo.phone = res.datas[0].phone
					}
				})
			},
			// 获取用户足迹总次数
			getAllBrowse() {
				let data = {
					asc: 2,
					order_by: 'add_time',
					page: 0,
					// store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					user_id: this.user_id,
					is_all: 1
				}
				this.$u.apiWei.BrowseUserList(data).then(res => {
					console.log(res.datas.all_browse)
					if (res.datas.all_browse.length) {
						res.datas.all_browse.forEach(item => {
							switch (Number(item.type)) {
								case 1:
									this.all_browse[0].value = item.num
									break;
								case 2:
									this.all_browse[1].value = item.num
									break;
								case 3:
									this.all_browse[2].value = item.num
									break;
								case 4:
									this.all_browse[3].value = item.num
									break;
								case 5:
									this.all_browse[4].value = item.num
									break;
							}
						})
					}
				})
			},
			init(active) {
				if (active == 0) {
					let data = {
						asc: 2,
						order_by: 'add_time',
						page: this.page.page1,
						store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
						user_id: this.user_id,
						is_all: 1,
						// parent_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
						time: this.dateIndex?this.dateType[this.dateIndex].value:''
					}
					this.$u.apiWei.BrowseUserList(data).then(res => {
						if (res.datas.list.length) {
							res.datas.list.forEach(item => {
								this.dynamicList.push(item)
							})
							this.more = true
						} else {
							this.more = false
						}
						if (this.dynamicList.length == 0 && this.page.page1 == 0) this.noData.noData1 = true
					})
				} else {
					let BrowseListData = {
						asc: 2,
						order_by: 'add_time',
						page: this.page.page2,
						store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
						user_id: this.user_id,
						paramter: 1,
						// parent_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
						time: this.dateIndex?this.dateType[this.dateIndex].value:''
					}
					this.$u.apiWei.BrowseList(BrowseListData).then(res => {
						if (res.datas.list.length) {
							res.datas.list.forEach(item => {
								this.footList.push(item)
							})
							this.more = true
						} else {
							this.more = false
						}
						if (this.footList.length == 0 && this.page.page2 == 0) this.noData.noData2 = true
					})
					console.log(this.footList)
				}
			},
			// tab切换
			change(index) {
				this.active = index;
			},
			// 拨打电话
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.phone
				});
			},
			goProInfo(data){
				if(data.is_house){
					if(data.is_house==1){
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/n98-info?group_id='+data.goods_id
						})
					}else{
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/house-info?group_id='+data.goods_id
						})
					}
				}else{
					if(data.store_goods_id){
						getApp().goProInfo(data.store_goods_id,true)
					}else{
						getApp().goProInfo(data.goods_id)
					}
				}
			},
			selectDatetype(index){
				this.dateIndex = index
				this.more = true
				this.dynamicList = []
				this.footList = []
				this.page = {
					page1: 0,
					page2: 0
				}
				this.init(this.active)
			},
		},
		onReachBottom() {
			this.status = 'loading';
			setTimeout(() => {
				this.status = 'nomore';
			}, 1000)
			if (!this.more) return;
			if (this.active == 0) this.page.page1++;
			if (this.active == 1) this.page.page2++;
			this.init(this.active)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFC;
	}

	.user-dynamic-datetype{
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx 0;
		view{
			flex: 1;
			font-size: 24rpx;
			text-align: center;
			height: 54rpx;
			line-height: 54rpx;
			background-color: #FFF;
			&:first-child{
				border-radius: 8rpx 0 0 8rpx;
			}
			&:last-child{
				border-radius: 0 8rpx 8rpx 0;
			}
			&.active{
				background-color: #141414;
				color: #FFF;
			}
		}
	}

	.user-dynamic-info {
		padding-top: 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-1 {
		background-color: #FFF;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-1 image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 100%;
		background-color: #EEE;
	}

	.user-dynamic-info .user-dynamic-info-1 .phoneCall {
		display: inline-block;
		color: #FFF;
		border: solid 1px #141414;
		font-size: 28rpx;
		padding: 5rpx 40rpx;
		border-radius: 8rpx;
		background-color: #141414;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box {
		flex: 1;
		min-width: 0;
		margin-left: 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box .user-dynamic-info-1-name {
		font-size: 30rpx;
		color: #333;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box .user-dynamic-info-1-id {
		font-size: 26rpx;
		color: #999;
		margin: 10rpx 0;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box .user-dynamic-info-1-phone {
		font-size: 28rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 {
		background-color: #FFF;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		border-bottom: solid 1px #EEE;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-tit {
		font-size: 30rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list {
		display: flex;
		margin-top: 30rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list .user-dynamic-info-2-item {
		flex: 1;
		text-align: center;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list .user-dynamic-info-2-item view {
		font-size: 24rpx;
		color: #999;
		text-transform: uppercase;
		margin-bottom: 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list .user-dynamic-info-2-item text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.user-dynamic-info .user-dynamic-info-list,
	.user-dynamic-info .user-foot-info-list {
		margin-top: 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item {
		position: relative;
		padding: 40rpx 20rpx;
		background-color: #FFF;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item::after {
		position: absolute;
		bottom: 0;
		left: 20rpx;
		right: 20rpx;
		height: 1px;
		content: "";
		background-color: #EEE;
	}
	
	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item:last-child::after{
		display: none;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tit {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		font-size: 30rpx;
		align-items: center;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tit text:last-child {
		color: #141414;
		font-weight: bold;
		font-size: 22rpx;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tims {
		margin-bottom: 10rpx;
		font-size: 26rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tims .blue {
		color: #141414;
		font-weight: bold;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item {
		padding: 20rpx;
		background-color: #FFF;
		display: flex;
		display: flex;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item image {
		width: 250rpx;
		height: 250rpx;
		border: solid 1px #EEE;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info {
		flex: 1;
		min-width: 0;
		position: relative;
		height: 250rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view {
		display: block;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.title {
		height: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.price {
		font-size: 20rpx;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.price text {
		font-size: 28rpx;
		color: #333;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.times {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		right: 0;
		font-size: 22rpx;
		color: #666;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.tabs {
		background-color: #FFF;
	}

	.tab__item {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
	}

	.tab__item text {
		display: inline-block;
		padding: 0 30rpx;
		height: 90rpx;
		color: #999;
		font-size: 24rpx;
	}

	.tab__item.active text {
		font-size: 28rpx;
		color: #333;
		height: 84rpx;
		line-height: 84rpx;
		border-bottom: solid 6rpx #fe9b26;
	}
</style>
